<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <select>
    <option>省份</option>
    <option value="0">河北</option>
    <option value="1">山东</option>
    <option value="2">河南</option>
  </select>
  <select>
    <option>城市</option>
  </select>
  <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  <script type="text/javascript">
			var arr=[[ "1", "2", "3"],[ "a", "b", "c"],[ "d", "e", "f"]];
			//给第一个下拉选添加值改变事件
			$("select:first").change(function(){
				//将之前选择的城市信息清除掉(覆盖掉)
				$("select:last").html("<option>城市</option>");
				
				//得到点击省份对应的城市信息
				var citys=arr[this.value];
				//得到数组就遍历
				for(var i=0;i<citys.length;i++){
					//创建option对象
					var opt=$("<option></option>");
					var cityname=citys[i];
					//把城市名称放到option中
					opt.text(cityname);
					//添加到第二个下拉选里面
					$("select:last").append(opt);
			
		</script>
</body>
</html>